<template>
    <div>
          <van-nav-bar
  title="发布房源"
  left-arrow
  @click-left="onClickLeft"
  :style="{background:'#21b97a'}"
/> 

<van-field label="房源信息" />

<!-- 1 -->
<van-field
  v-model="sms1"
  center
  clearable
  label="小区名称"
  placeholder="请输入小区名称"
>
  <template #button><van-icon name="arrow" /></template>
</van-field>
<!-- 2 -->
<van-field
  v-model="sms2"
  center
  clearable
  label="租金"
  placeholder="请输入租金/月"
>
  <template #button>￥/月</template>
</van-field>
<!-- 3 -->
<van-field
  v-model="sms3"
  center
  clearable
  label="建筑面积"
  placeholder="请输入建筑面积"
>
  <template #button>m*2</template>
</van-field>
<!-- <4> -->
<van-field
  readonly
  clickable
  name="picker"
  :value="value"
  label="所在楼层"
  placeholder="请选择"
  @click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom" >
  <van-picker
    show-toolbar
    :columns="columns"
    @confirm="onConfirm"
    @cancel="showPicker = false"
  />
</van-popup >

<!-- <5> -->
<van-field label="房屋标题" />
<!-- <6> -->
  <van-field
  v-model="sms6"
  center
  clearable
  placeholder="请输入标题(例如:整租 小区名 2室 5000元)"
>
  <template #button><van-icon name="arrow" /></template>
</van-field>
  <!-- <7> -->
<van-field label="房屋图像" />
<!-- <8> -->
<van-uploader :before-read="beforeRead" />
  <!-- <9> -->
<van-field label="房屋配置" />
 <!-- <10> -->
 <van-grid :column-num="5" gutter='12px'>
      <van-grid-item  icon="wap-home-o" text="衣柜" :class="isshow1 ? 'active': '' " @click="isshow1 = !isshow1" />
      <van-grid-item  icon="friends-o" text="洗衣机" :class="isshow2 ? 'active': '' " @click="isshow2 = !isshow2"/>
      <van-grid-item  icon="location-o" text="空调" :class="isshow3 ? 'active': '' " @click="isshow3 = !isshow3"/>
      <van-grid-item  icon="home-o" text="天然气" :class="isshow4 ? 'active': '' " @click="isshow4 = !isshow4"/>
      <van-grid-item  icon="wap-home-o" text="冰箱" :class="isshow5 ? 'active': '' " @click="isshow5 = !isshow5"/>
      <van-grid-item  icon="friends-o" text="暖气" :class="isshow6 ? 'active': '' " @click="isshow6 = !isshow6"/>
      <van-grid-item  icon="location-o" text="电视" :class="isshow7 ? 'active': '' " @click="isshow7 = !isshow7"/>
      <van-grid-item  icon="home-o" text="热水器" :class="isshow8 ? 'active': '' " @click="isshow8 = !isshow8"/>
      <van-grid-item  icon="wap-home-o" text="宽带" :class="isshow9 ? 'active': '' " @click="isshow9 = !isshow9"/>
      <van-grid-item  icon="friends-o" text="沙发" :class="isshow10 ? 'active': '' " @click="isshow10 = !isshow10"/>
      </van-grid>
 <!-- <11> -->
<van-field label="房屋描述" />
<!-- <12> -->
<van-field
  v-model="message"
  rows="2"
  autosize
  type="textarea"
  maxlength="50"
  placeholder="请输入房屋描述信息"
  show-word-limit
/>

 <van-button round block type="info" native-type="submit">提交</van-button>
    </div>
</template>
<script>
import { Toast } from 'vant';

export default {
    name: 'dadwe12',

    data() {
        return {
          sms1:'',
          sms2:'',
          sms3:'',
          sms6:'',
        value: '',
      columns: ['1', '2', '3', '4', '5', '6'],
      showPicker: false,

      message:'',
      isshow1:false,
      isshow2:false,
      isshow3:false,
      isshow4:false,
      isshow5:false,
      isshow6:false,
      isshow7:false,
      isshow8:false,
      isshow9:false,
      isshow10:false,
        };
    },

    mounted() {
        
    },

    methods: {
        onClickLeft() {
       this.$router.push({ 
         path:'/layout/shouye', 
          }) 
    },

    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },

    
      // 返回布尔值
    beforeRead(file) {
      if (file.type !== 'image/jpeg') {
        Toast('请上传 jpg 格式图片');
        return false;
      }
      return true;
    },
    // 返回 Promise
    asyncBeforeRead(file) {
      return new Promise((resolve, reject) => {
        if (file.type !== 'image/jpeg') {
          Toast('请上传 jpg 格式图片');
          reject();
        } else {
          let img = new File(['foo'], 'bar.jpg', {
            type: 'image/jpeg',
          });
          resolve(img);
        }
      });
    },


    },
};
</script>

<style lang="less" scoped>
.active{
  color:red;
}
</style>